<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../common/jquery.js"></script>
		<style>
			.startDivStyle {
				width: 50px;
				height: 50px;
				border: 1px solid gray;
				position: absolute;
				top: 100px;
				left: 400px;
			}
			
			#endDiv {
				width: 50px;
				height: 50px;
				border: 1px solid gray;
				position: absolute;
				top: 400px;
				left: 300px;
			}
		</style>
	</head>

	<body>
		<div id="startDiv" class="startDivStyle">起点</div>
		<div id="endDiv">终点</div>
	</body>
	<script>
		(function() {

			//y = a(x平方) + bx + c
			//a确定开口方向和曲率，我们可以定死
			//b确定抛物线的中心轴在正还是负
			//c确定抛物线和y轴的焦点位置
			//综上所述，知道两点坐标和a的值，可求出b和c的值，可求出抛物线公式
			var startX = $('#startDiv').offset().left;
			var startY = $('#startDiv').offset().top;
			//(400,-100)

			//(450,-50)

			var endX = $('#endDiv').offset().left;
			var endY = $('#endDiv').offset().top;
			//(300,-400)
			
//			$('#startDiv').animate({
//				top:endX+'px',
//				left:endY+'px'
//			},"normal");
//			$('#endDiv').animate({
//				top:startX+'px',
//				left:startY+'px'
//			},"normal");
					function calculationY(x){
						var a = -0.13;
						var b = 12.33;
						var c = -2900;
						y = a*x*x+b*x+c;
						return y;
					}
					alert(calculationY(400));

			function add() {

				$('#startDiv').on('click', function() {
					var cloneDiv = $(this).clone();
					cloneDiv.css('top', startY + "px").css('left', startX + 'px');
					$('body').after(cloneDiv);


					cloneDiv.animate({
						top: endY + "px",
						left: endX + "px"
					}, "normal", function() {
						cloneDiv.remove()
					})
				});
			}
			add();
			

		})();
	</script>

</html>